<template>
  <div class="tobeDone">
    <tableIndex
      :tableData="state.tableData"
      :tableHead="state.tableHead"
      :isIndex="true"
      :isSelection="false"
      :isRadio="false"
      :fields="state.fields"
      :height="500"
      @selectChange="selectChange"
      ref="tableIndexRef"
      :page="state.page"
      @searchList="searchList"
      @page-change="pageChange"
    >
      <template #right-btn>
        <div class="d-flex" style="float: right">
          <div
            class="screen-button d-flex a-center j-center m-r10"
            :style="{
              '--screen-button-border-color':
                state.isHide === '1' ? '#fc7037' : '#CCCCCC'
            }"
          >
            <el-radio
              v-model="state.isHide"
              label="1"
              @click.prevent="radioChange(state.isHide)"
              >隐藏已验收项目</el-radio
            >
          </div>
          <el-button plain class="button_edit m-r10" @click="addHandler"
            ><svg-icon icon-class="project-add-icon" class="m-r5" /> 新增</el-button
          >
          <el-button plain class="button_edit" @click="onExport(getSearch())"
            ><svg-icon icon-class="export" class="m-r5"/> 导出</el-button
          >
        </div>
      </template>
      <template #operate>
        <el-table-column label="操作" width="300" align="left" fixed="right">
          <!-- -1待处理1处理中2已处理3已验收 -->
          <template #default="{ row }">
            <el-button
              v-if="row.dealStatus != -1"
              size="small"
              class="button_view"
              type="primary"
              @click="infoDrawerHandler(row)"
              >查看</el-button
            >
            <el-button
              v-if="row.dealStatus == 1"
              size="small"
              class="button_edit"
              type="primary"
              @click="editHandler(row)"
              >编辑</el-button
            >
            <el-button
              v-if="row.dealStatus == -1"
              size="small"
              class="button_delete"
              type="primary"
              @click="deleteHandler(row)"
              >删除</el-button
            >
            <el-button
              v-if="row.dealStatus == 1 || row.dealStatus == -1"
              size="small"
              class="button_funtion"
              type="primary"
              @click="projectProposal(row)"
              >处理</el-button
            >
            <el-button
              v-if="row.dealStatus == 2"
              size="small"
              class="button_funtion2"
              type="primary"
              @click="checkHandler(row)"
              >验收</el-button
            >
          </template>
        </el-table-column>
      </template>
    </tableIndex>

    <infodialog ref="info" @getsearch="getPage"></infodialog>
    <infodrawer ref="infoDrawer" @getsearch="getPage"></infodrawer>
  </div>
</template>

<script setup>
import TableIndex from '@/components/table/index.vue'
import Infodialog from './components/dialog.vue'
import Infodrawer from './components/drawer.vue'
import { qualitySupervision, department } from '@/api/project'
import { ref, onMounted, reactive } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { deriveHandelFnc } from '@/hooks/downCommon'

const state = reactive({
  isHide: '1',
  fields: [
    { key: 'projectName', label: '项目名称', type: 'input',placeholder:'请输入项目名称',width:300 },
    {
      key: 'dealStatus',
      label: '状态',
      type: 'select',
      options: {
        list: [
          {
            value: '',
            label: '全部'
          },
          {
            value: -1,
            label: '待处理'
          },
          {
            value: 1,
            label: '处理中'
          },
          {
            value: 2,
            label: '已处理'
          },
          {
            value: 3,
            label: '已验收'
          }
        ]
      }
    }
  ],
  page: {
    page: 1,
    pageSize: 10,
    total: 0
  },
  tableData: [],
  tableHead: [
    {
      prop: 'projectName',
      label: '项目名称',
      width: '120',
      style: {
        color: '#fc7018'
      }
    },
    {
      prop: 'problemCategoryName',
      label: '问题分类'
    },
    {
      prop: 'problemTypeName',
      label: '问题类型'
    },
    {
      prop: 'dealStatus',
      label: '状态',
      // -1待处理1处理中2已处理3已验收
      formatter(row) {
        let str = ''
        switch (row.dealStatus) {
          case -1:
            str = '待处理'
            break
          case 1:
            str = '处理中'
            break
          case 2:
            str = '已处理'
            break
          case 3:
            str = '已验收'
            break
        }
        return str
      }
    },
    {
      prop: 'applyUserName',
      label: '发起责任人'
    },
    {
      prop: 'problemDescription',
      label: '问题描述'
    },
    {
      prop: 'dealDepartmentName',
      label: '处理部门'
    },
    {
      prop: 'dealUserName',
      label: '处理人'
    },
    {
      prop: 'deadline',
      label: '截止完成时间',
      width: 120,
    },
    {
      prop: 'createTime',
      label: '创建时间'
    }
  ]
})
const info = ref(null)
const infoDrawer = ref(null)

const tableIndexRef = ref(null)
//获取列表组件搜索数据
const getSearch = () => {
  return tableIndexRef.value.getSearchData()
}
const exportConfig = reactive({
  fileName: '质量监督',
  apiPath: 'problemExport',
  form: {}
})
const { onExport } = deriveHandelFnc(exportConfig)
const radioChange = (e) => {
  if (e === '1') {
    state.isHide = '0'
  } else {
    state.isHide = '1'
  }
  getPage()
}
const selectChange = (e) => {
  console.log(e)
}
const projectProposal = (row) => {
  infoDrawer.value.state.type = ''
  infoDrawer.value.state.centerDialogVisible = true
  infoDrawer.value.state.qualityProblemId = row.qualityProblemId
  infoDrawer.value.state.dealStatus = row.dealStatus
}
//新增
const addHandler = () => {
  info.value.state.centerDialogVisible = true
  info.value.state.type = 0
}
//编辑
const editHandler = (row) => {
  info.value.state.centerDialogVisible = true
  info.value.state.type = 1
  info.value.state.editId = row.qualityProblemId
}
//删除
const deleteHandler = (row) => {
  ElMessageBox.confirm('确认删除吗?', {
    confirmButtonText: '确认',
    confirmButtonClass: "button_view",
    cancelButtonText: '取消',
    cancelButtonClass: "button_cancel2",
    type: 'warning'
  })
    .then(() => {
      qualitySupervision.removeProblem(row.qualityProblemId).then((res) => {
        if (res.code == 200) {
          ElMessage.success('删除成功')
          getPage()
        }
      })
    })
    .catch(() => {})
}
//验收
const checkHandler = (row) => {
  infoDrawer.value.state.type = '查看'
  infoDrawer.value.state.centerDialogVisible = true
  infoDrawer.value.state.qualityProblemId = row.qualityProblemId
  infoDrawer.value.state.dealStatus = row.dealStatus
}
//抽屉打开
const infoDrawerHandler = (row) => {
  infoDrawer.value.state.type = '查看'
  infoDrawer.value.state.centerDialogVisible = true
  infoDrawer.value.state.qualityProblemId = row.qualityProblemId
  infoDrawer.value.state.dealStatus = row.dealStatus
}
//搜索
const searchList = (e) => {
  getPage(e)
}
//获取分页数据
const getPage = (e) => {
  let obj = {
    pageNum: state.page.page,
    pageSize: state.page.pageSize,
    param: {
      isHide: state.isHide,
      ...getSearch()
    }
  }
  qualitySupervision.getPage(obj).then((res) => {
    const { data, code, msg } = res
    if (code == '200') {
      state.tableData = data.content
      state.page.total = data.totalSize
    }
  })
}
//分页
const pageChange = (e) => {
  state.page.page = e.page
  state.page.pageSize = e.limit
  getPage()
}
//获取所有部门信息
// const getdepartmentList = () => {
//   department.getAllDepartments().then((res) => {
//     if (res.code == 200) {
//       res.data.forEach((item) => {
//         state.fields[1].options.list.push({
//           label: item.departmentName,
//           value: item.departmentId
//         })
//       })

//     }
//   })
// }
onMounted(() => {
  getPage()
  // getdepartmentList()
})
</script>

<style lang="scss" scoped>
.tobeDone {
  width: 100%;
}
</style>
